<template>
  <div class="app">
    <div class="register">
       <h2>注册页</h2> 
        <input type="text" v-model="formData.phone" placeholder="手机号"><br>
        <input type="password" v-model="formData.pass" placeholder="密码"><br>
        <input type="password" v-model="formData.checkPass" placeholder="确认密码"><br>
        <input class="btn" type="button" value="注册" @click="register">
        <p>
          账号已注册，点这里<span @click="$router.push('/login')">立即登录</span> 。
        </p>
    </div>
  </div>
</template>

<script>
import {user_register} from "../utils/api"
export default {
  data(){
    return{
        formData:{ 
            phone:"",
            pass:"",
            checkPass:""
        }
    }
 },
 methods:{
  register(){
    if(!this.formData.phone){
      this.$toast('请输入手机号');
    }else if(!this.formData.pass||!this.formData.checkPass){
      this.$toast('密码/确认密码不能为空');
    }else if((/^1[3-9]\d{9}$/).test(this.formData.phone)==false){
      this.$toast('请输入正确的手机号');
    }else if(this.formData.pass!=this.formData.checkPass){
      this.$toast('密码与确认密码不一致！');
    }else{
      let newFormData=JSON.parse(JSON.stringify(this.formData))
      delete newFormData.checkPass
      user_register(newFormData).then((res)=>{
       if(res.data.code==200){
        this.$toast.success('注册成功');
        this.$router.push('/login')
       }else{
        this.$toast.success(res.data.msg);
       }
      })
    }
  }
 }
};
</script>

<style lang="scss" scoped>
.app{
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
}
input{
    width: 100%;
    height: 40px;
    border: 1px solid #d4d3d3;
    outline: none;
    border-radius: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    padding-left: 20px;
}
.btn{
  text-align: center;
  color: white;
  background-color: rgb(27, 126, 206);
}
.register{
  padding: 20px;
  h2{
    margin: 30px 0 20px 20px;
  }
  span{
    color:rgb(27, 126, 206) ;
  }
}
</style>